<style>
    #onediy .layui-form-checkbox{
        height: 38px;
        line-height: 38px;
        width: 88px;
        margin:4px 10px 4px 10px
    }
    #onediy .layui-form-checkbox i{
        height: 38px;
    }
    #onediy .layui-form-checkbox span{
       padding: 0 15px;
    }

    #onediy .layui-input-block{
        margin-left: 0px;
    }


    #diycolor div:nth-child(2) span{
        background: #5FB878;
    }

    #diycolor div:nth-child(4) span{
        background: #1E9FFF;
    }

    #diycolor div:nth-child(6) span{
        background: #FFB800;
    }

    #diycolor div:nth-child(8) span{
        background:mediumvioletred;
    }

    #diycolor div:nth-child(10) span{
        background: #FF5722;
    }

    #diycolor div:nth-child(12) span{
        background: #393D49;
    }

    #roombody{
        left:45px;
        top:150px;
        width: 100%;
        position: inherit;
        min-height: 80px;
        transition: width 0.3s;
    }
    #roombody .rommline{
        margin-bottom: 50px;
    }

    #roombody .rommline a{
        white-space: nowrap;
        overflow: hidden;
        width: 70%;
        display: inline-flex;

    }
    #roombody .rommline a:hover{
        white-space: nowrap;
        overflow: hidden;

    }


    #roombody .layui-btn{
        width: 110px;
    }

    .sidebarClass {
        position: fixed;
        right: -75%;
        width: 50%;
        height: calc(100vh - 2.5rem);
        z-index: 9999;
        transition: width 1s;
        background: white;
        top:0px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
        border-radius: 3px;
        border:1px solid #F1F4F6 ;
    }

    .addWidth {
        width: 100%;
        overflow-y: auto;
    }

    .layui-btn{
        padding: 0 5px;
    }
    .layui-btn .layui-icon{
        margin-right:0px;
    }

    #sideBar .layui-form-label{
        width: 7%;
        padding: 9px 10px 9px 0px;;
    }
    #sideBar .layui-input-inline{
        width: 15%;
    }
    #sideBar .layui-layer-title{
        padding: 0 80px 0 10px;
    }

    #sideBar .layui-icon-spread-left {
        cursor: pointer;
        margin-right: 5px;
    }

    #sideBar .submitright{
        width: 25%;
        text-align: center;
        margin-top: 50px;
    }
    #sideBar .layui-timeline-title{
        font-size: 14px;
    }
    #sideBar .layui-select-title{
        color: red;
    }
    #reserveStatus .layui-select-title{
        color: blue !important;
    }

</style>

<div class="panel panel-default panel-intro" >

    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="onediy">
                <div class="header" >
                    <form class="layui-form layui-form-pane" action="">

                        <div class="layui-form-item col-sm-2" pane="" id="seldiv" style="display: none;width: 250px">
                            <label class="layui-form-label" style="width: 40%;border: none;padding-right:20px">切换酒店</label>
                            <div class="layui-input-block" style="width: 150px;top:-1px;height: 36px;margin-left: 39%">
                                <select id="sel" lay-filter="selecthotel"  name="hotelslist" lay-verify="required"  lay-search></select>

                            </div>
                        </div>


                        <div class="layui-form-item col-sm-8" style="top:-57px;right: -25%; display: none" id="btndiv">
                            <div class="layui-input-block" id="diycolor">
                                <input type="checkbox" class="normal" name="like[normal]" title="空闲" checked>
                                <input type="checkbox" class="using" name="like[using]" title="使用" checked>
                                <input type="checkbox" name="like[reserve]" title="预定" checked>
                                <input type="checkbox" name="like[cleaning]" title="打扫" checked>
                                <input type="checkbox" name="like[repair]" title="维修" checked>
                                <input type="checkbox" name="like[hidden]" title="隐藏" checked>
                            </div>
                        </div>


                    </form>

                    <!--房态布局-->
                    <div class="layui-body" id="roombody" style="display: none"></div>

                    <!-- 右侧面板 -->
                    <div id="sideBar" class="sidebarClass">
                        <div class="layui-layer-title" style="background: #18BC9C;color: white;margin-bottom: 20px">
                               <i class="layui-icon layui-icon-spread-left" id="hideright"></i>房间使用情况
                        </div>

                        <form class="layui-form" onsubmit="return false">

                            <input type="hidden" name="password" id="statusid" lay-verify="required" placeholder="请输入密码" autocomplete="off"  value="111" class="layui-input">
                            <div class="layui-form-item">
                                <label class="layui-form-label">酒店名称</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="text"  id="statushtitle" lay-verify="required" readonly placeholder="请输入密码" autocomplete="off" value="格林豪泰" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">房间标题</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="text" id="statustitle" lay-verify="required" readonly placeholder="请输入密码" autocomplete="off" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">房间编号</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="text" id="statuscode" lay-verify="required" readonly placeholder="请输入密码" autocomplete="off" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">单价[时]</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="number" id="statusprice"  lay-verify="required" readonly placeholder="请输入密码" autocomplete="off" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">房间总价</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="number" id="statusallprice" lay-verify="required" readonly placeholder="请输入密码" autocomplete="off" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">可预定时间(止)</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="text" id="beforeTime" lay-verify="required" readonly placeholder="自动换算可计算时间" autocomplete="off" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label" style="color: red">房间形态</label>
                                <div class="layui-input-inline">
                                    <select name="city" id="statusText" lay-verify="required">
                                        <option value="normal">空闲</option>
                                        <option value="using">使用</option>
                                        <option value="reserve">预定</option>
                                        <option value="repair">维修</option>
                                        <option value="cleaning">打扫</option>
                                        <option value="hidden">隐藏</option>
                                    </select>
                                </div>
                            </div>

                            <div id="moveIntoInfo" class="layui-form-item" style="border-bottom:1px solid #E6E6E6;padding-bottom: 30px;display: none">
                                <label class="layui-form-label">入住信息</label>
                                <div class="layui-input-inline">
                                    <ul class="layui-timeline">
                                        <li class="layui-timeline-item">
                                            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                            <div class="layui-timeline-content layui-text">

                                                <ul>
                                                    <li>订单时间：<span class="classAddtime"></span></li>
                                                    <li>订单用户：<span class="classUser"></span></li>
                                                    <li>预订时间：<span class="classStime"></span></li>
                                                    <li>入住时间：<span class="classMtime"></span></li>
                                                    <li>退房时间：<span class="classEtime"></span></li>
                                                    <li>订单状态：<span>使用中</span></li>
                                                    <li>已缴费用：<span class="classAllmoney">180.55</span>元</li>

                                                </ul>
                                            </div>
                                        </li>
                                        <li class="layui-timeline-item">
                                            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                        </li>
                                    </ul>
                                </div>

                            </div>

                            <div  class="layui-form-item" style="border-bottom:1px solid #E6E6E6;padding-bottom: 30px">
                                <label class="layui-form-label">预约信息</label>
                                <div class="layui-input-inline">
                                    <ul class="layui-timeline">
                                        <li class="layui-timeline-item">
                                            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                            <div id="reserveInfo" class="layui-timeline-content layui-text">
                                            </div>
                                        </li>
                                        <li class="layui-timeline-item">
                                            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                        </li>
                                    </ul>
                                </div>

                            </div>


                            <div class="layui-form-item">
                                <div class="layui-input-block submitright">
                                    <button class="layui-btn" lay-filter="formDemo" id="changeStatusText">修改状态</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </div>
                        </form>

                    </div>


                </div>

            </div>
        </div>
    </div>



</div>



